<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="add">添加</button>
    <button class="sortAge">年龄从小到大排序</button>
    <button class="delSelected">删除选中</button>
    <table border="1" cellspacing='10'>
        <tbody>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>操作</th>
                <th>选择</th>
            </tr>
            <!-- <tr>
                <td>1</td>
                <td>jack</td>
                <td>未知</td>
                <td><button >删除</button></td>
            </tr> -->
            <!-- <tr>
                <td>2</td>
                <td>jack</td>
                <td>未知</td>
                <td><button onclick="del">删除</button></td>
            </tr> -->
        </tbody>
    </table>
    <script>
         var info = [
        {
          name: "胡杭",
          age: 16,
        },
        {
          name: "胜明",
          age: 22,
        },
        {
          name: "军毅",
          age: 21,
        },
        {
          name: "晓华",
          age: 13,
        },
        {
          name: "盛聪",
          age: 23,
        },
        {
          name: "侦剑",
          age: 32,
        },
        {
          name: "红翔",
          age: 25,
        },
        {
          name: "超维",
          age: 18,
        },
        {
          name: "士琪",
          age: 22,
        },
        {
          name: "艳华",
          age: 20,
        },
      ];
        let tbody = document.querySelector("tbody");
        let addBtn = document.querySelector(".add");
        //   let delBtn = tbody.querySelectorAll("button");
        let sortAge = document.querySelector(".sortAge")

        let index = 0;
        addBtn.onclick = function () {
            // index小于信息数据长度
            // tbody 的子节点长度小于等于信息数据长度， 实现删除后新增的内容从信息数据第一个数据开始加起
            if (index < info.length && tbody.children.length <= info.length) {
                let newTr = document.createElement("tr");

                newTr.innerHTML = `
                <td>${index+1}</td>
                <td>${info[index].name}</td>
                <td>${info[index].sex}</td>
                <td>${info[index].age}</td>

                <td><button>删除</button></td>
                <td><input type="checkbox" data-index="${index}"></td>
            `;
                tbody.appendChild(newTr);
                // 重新赋值，获取最新的删除按钮
                delBtn = tbody.querySelectorAll("button");
                for (let i = 0; i < delBtn.length; i++) {
                    delBtn[i].onclick = function () {
                        delBtn[i].parentElement.parentElement.remove();
                        update()
                    };
                }
                // 自增
                update();
                index++;

            } else {
                // 信息数据的第一个开始加起
                index = 0;
            }
        };
        //  年龄排序
        sortAge.addEventListener("click", function () {
            let rows = tbody.rows
            let arr = []
            for (let i = 0; i < rows.length; i++) {
                arr.push(rows[i])
            };
            arr.sort(function (a, b) {
                return a.children[3].innerText - b.children[3].innerText
            })
            arr.forEach(function(item){
                tbody.appendChild(item)
               
            })
            update()
        })
 //  序号更新的封装函数
        function update() {
            let rows = tbody.rows
            for (let i = 1; i < rows.length; i++) {
                rows[i].children[0].innerText = i
            }
        }
    </script>
</body>

</html>